import { useState, useEffect, useCallback } from "react";
import { Input } from "antd";
import { SearchOutlined, RightOutlined } from "@ant-design/icons";
import UserCard from "../../../../components/UserCard";
import UserMark from "../../../../components/UserMark";
import { request } from "../../../../common/request";
import { urls } from "../../../../common/urls";
import "./index.less";

const { Search } = Input;
const suffix = (
  <SearchOutlined
    style={{
      fontSize: 16,
      color: "#1677ff",
    }}
  />
);

function AddUser() {
  const [type, setType] = useState("list");
  const [userDetail, setUserDetail] = useState({ oid: "", id: "" });
  const [searchValue, setSearchValue] = useState("");
  const [addList, setAddList] = useState([]);

  const getSearchList = (key: string) => {
    request({
      method: "post",
      data: {
        method: urls.searchList,
        key,
      },
    }).then((res: any) => {
      const { team, users } = res.data;
      const addList: any = [
        {
          id: 1,
          group: "好友",
          type: "userItem",
          list: users.map((x: any) => {
            return {
              ...x,
              name: x.username,
              oid: x.users_id,
            };
          }),
        },
        {
          id: 2,
          group: "群聊",
          type: "groupItem",
          list: team.map((x: any) => {
            return {
              ...x,
              avatar: x.logo,
              oid: x.group_id,
            };
          }),
        },
      ];
      setAddList(addList);
      setSearchValue("");
    });
  };

  const getUserDetail = (uid: string, type: string) => {
    request({
      method: "post",
      data: {
        method: urls.userDetail,
        f_uid: uid,
      },
    }).then((res: any) => {
      const info = {
        ...res.data,
        name: res.data.username,
        oid: res.data.users_id,
        id: uid,
      };

      setUserDetail(info);
      setType(type);
    });
  };

  const handleSearch = (key: string) => {
    if (key) {
      getSearchList(key);
    }
  };

  const handleDetail = (m: any, type: string) => {
    const {id, group_id} = m;
    if (id) {
      getUserDetail(id, type);
    }
    else if(group_id) {
      
    }
  };
  const handleAddUser = useCallback(() => {
    request({
      method: "post",
      data: {
        method: urls.addUser,
        user_id: userDetail.id,
        type: 1
      },
    }).then((res: any) => {
      setType("list");
    });
  }, [userDetail]);
  const handleAddGroup = () => {
    setType("list");
  };

  useEffect(() => {}, []);

  return (
    <>
      <div className="add-user-content">
        {type === "list" && (
          <>
            <Search
              placeholder="搜索用户手机号"
              enterButton="搜素"
              size="large"
              value={searchValue}
              suffix={suffix}
              allowClear
              onChange={(e) => setSearchValue(e.target.value)}
              onSearch={handleSearch}
            />
            {addList?.map((x: any, i) => {
              return (
                <div className="add-user-link" key={i}>
                  <p className="add-user-link-title">{x.group}</p>
                  <div className="user-link-group">
                    {x.list.map((m: any, n: number) => {
                      return (
                        <div
                          className="link-item"
                          key={n}
                          onClick={() => handleDetail(m, x.type)}
                        >
                          <UserCard info={m} />
                          <div>
                            <RightOutlined />
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </>
        )}
        {type === "userItem" && (
          <>
            <UserCard info={userDetail} />
            <div className="user-link-group">
              <UserMark info={userDetail} />
            </div>
            <div className="btn-default" onClick={handleAddUser}>
              添加为好友
            </div>
          </>
        )}
        {type === "groupItem" && (
          <>
            <div className="user-link-group">
              <div className="link-item" style={{ borderTop: "none" }}>
                <div>群头像</div>
                <div>
                  <img
                    src="https://img.58tg.com/up/allimg/tx06/0713201964689.jpg"
                    className="group-img"
                    alt=""
                  />
                </div>
              </div>
              <div className="link-item">
                <div>群名称</div>
                <div>府佑书院社区群</div>
              </div>
              <div className="link-item">
                <div>群号码</div>
                <div>121212121</div>
              </div>
              <div className="link-item">
                <div>群二维码</div>
                <div className="flex-center">
                  <img
                    src="../../../../assets/icon/txl_qun_erweima@2x.png"
                    className="qr-img"
                    alt=""
                  />
                  <RightOutlined />
                </div>
              </div>
              <div className="group-notice">
                <p>群公告</p>
                <p>
                  严厉打击任何形式的违法违规、低俗涉黄、暴力血腥等内容，全面禁止涉黄、涉政、涉敏感话题，严禁脏话性暗示、隐形诈骗、带侮辱性聊天内容，坚决抵制影响未成年人成长的不健康内容。
                </p>
              </div>
              <div className="btn-default" onClick={handleAddGroup}>
                申请加入
              </div>
            </div>
          </>
        )}
      </div>
    </>
  );
}
export default AddUser;
